<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-right" @tap="toRegister()">
				<view class="cancel">
					注册
				</view>
			</view>
		</view>
		<view class="logo">
			<image src="../../static/images/login/huo2x.png"></image>
		</view>
		<view class="main">
			<view class="title" >
				登录
			</view>
			<view class="slogin">
				你好，欢迎来到火火
			</view>
			<view class="input">
				<input type="text" v-model="username" placeholder="手机号" class="user" placeholder-style="color:#aaa;font-weight:400;" />
				<input type="password" v-model="pwd" placeholder="密码" class="pwd" placeholder-style="color:#aaa;font-weight:400;"   />
			</view>
			<view class="tips" v-show="tips">
				{{tipInfo}}
			</view>
		</view>
		<view class="submit" @tap="login()">
			登录 
		</view>
	</view>
</template>

<script>
	import request from '../../api/request.js';
	export default {
		data() {
			return {
				tips:false,
				username:'',
				pwd:'',
				tipInfo:"用户名或密码错误"
			}
		},
		methods: {
			//跳转到注册页面
			toRegister(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			async login() {
				if(this.username.match(/^[ ]*$/)){
					this.tips = true
					this.tipInfo = "请输入用户名"
					return
				}
				else{
					if(this.pwd.match(/^[ ]*$/)){
						this.tips = true
						this.tipInfo = "请输入密码"
						return
					}
					this.tips = false
					this.tipInfo = ''
					let res = await request({
						url: '/user/login',
						data: {
							username: this.username,
							password: this.pwd
						},
						method: 'POST'
					});
					console.log(res)
					res = res[1].data;
					console.log(res)
					if(res.code == 200){
						// 连接socket.io
						uni.setStorageSync("userInfo",res.data)
						this.$store.dispatch('conenct', this.username);
						this.$store.dispatch('getUserInfo');
						uni.showToast({
							title: "登录成功",
							duration: 2000
						});
						setTimeout(()=>{
							uni.switchTab({
								url:"../index/index",
								fail: (res) => {
									console.log(res)
								}
							})
						},2100)
					}
					else{
						this.tips = true
						this.tipInfo="用户名或密码错误"
					}
					}
			}

		}
	}
</script>

<style lang="scss">
	.content{
	
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		padding-top: var(--status-bar-height);
	}
	.top-bar {
		position: fixed;
		z-index: 1001;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		padding-top: var(--status-bar-height);
		background: $uni-bg-color;
		

		.top-bar-right {
			float: right;
			padding-right: 32rpx;

			.cancel {
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				font-weight: 500;
				line-height: 88rpx;
				font-family: PingFangSC-Medium;
			}
		}
	}
	.logo{
		text-align: center;
		image{
			padding-top: 256rpx;
			width: 194rpx;
			height: 93rpx;
			margin: 0 auto;
		}
	}
	.main{
		padding: 54rpx $uni-spacing-row-lg 120rpx;
		// width: 100%;
		.title{
			font-family: PingFangSC-Medium;
			font-size: 56rpx;
			color: $uni-text-color;
			font-weight: 500;
			line-height: 80rpx;
		}
		.slogin{
			font-family: PingFangSC-Regular;
			font-size: 40rpx;
			color: $uni-text-color-grey;
			line-height:56rpx ;
		}
		.input{
			padding-top: 8rpx;
			
			input{
				padding-top: 40rpx;
				height: 88rpx;
				font-family: AvenirNext-Medium;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				font-weight: 500;
				line-height:88rpx ;
				border-bottom: 1px solid $uni-border-color;
			}
		}
		.tips{
			float: left;
			font-family: AvenirNext-Medium;
			font-size: $uni-font-size-lg;
			color: $uni-color-warning;
			line-height:56rpx ;
			
		}
	}
	.submit{
		margin: 0 auto;
		width: 520rpx;
		height: 96rpx;
		background: $uni-color-primary;
		box-shadow: 0px 50rpx 32rpx -36rpx rgba(255,228,49,0.4);
		border-radius: 48rpx;
		font-family: PingFangSC-Medium;
		font-size: $uni-font-size-lg;
		color: $uni-text-color;
		font-weight: 500;
		line-height: 96rpx;
		text-align: center;
	}
</style>
